<template>
    <a-popover
            placement="left"
            trigger="click"
            width="400"
    >
        <template #reference>
            <a-button>
                <i-icon :icon="selectIcon" :size="iconSize" class="mr-2"></i-icon>
                <span v-if="!hideLabel">{{ selectIcon }}</span>
            </a-button>

            <a-button style="margin-right: 16px">Click to activate</a-button>
        </template>

        <div class="d-flex flex-column">
            <a-input v-model="searchValue" clearable placeholder="搜索">
            </a-input>
            <a-scrollbar height="400">
                <a-row>
                    <template v-for="(item,index) in iconList">
                        <a-col :span="3">
                            <div class="d-flex flex-column align-center icon-menu-item" @click="onSelect(item)">
                                <i-icon :icon="item" size="24px"/>
                            </div>
                        </a-col>
                    </template>
                </a-row>
            </a-scrollbar>
            <div class="flex-fill fill-width d-flex justify-center">
                <a-pagination
                        v-model:current="current"
                        :default-page-size="defaultPageSize"
                        :pager-count="<any>5"
                        :total="total"
                        background
                        layout="prev, pager, next"
                        @current-change="change"
                ></a-pagination>
            </div>
        </div>

    </a-popover>
</template>

<script lang="ts" setup>
import mdiIcons from "@/icesoft/components/icon/icons";
import {reactive, ref, watch} from "vue";
import IIcon from "~/icesoft/components/icon/IIcon.vue";

let icons = reactive(mdiIcons);
const current = ref(1);
const total = ref(icons.length);
const defaultPageSize = ref<number>(64);
const iconList = ref<string[]>(icons.slice(0, defaultPageSize.value));
const searchValue = ref("");
const selectIcon = ref<string>("mdi-leaf");
const props = defineProps({
    modelValue: {
        type: String,
    },
    hideLabel: {
        type: Boolean,
        default: false,
    },
    iconSize: {
        type: String,
        default: "20px",
    },
});
const emit = defineEmits(["on-selectIcon", "update:modelValue"]);

const change = (current: number) => {
    let loadStart = (current - 1) * defaultPageSize.value;
    let loadEnd = current * defaultPageSize.value;
    iconList.value = icons.slice(loadStart, loadEnd);
};

watch(props, value => {

    if (value.modelValue) {
        onSelect(value.modelValue);
    }
}, {immediate: true});
watch(searchValue, value => {
    if (searchValue.value.length > 0) {
        const list: any[] = [];
        mdiIcons.find(item => {
            if (item.toLowerCase().includes(searchValue.value.toLowerCase())) {
                list.push(item);
            }
        });
        icons = list;
        total.value = icons.length;
        iconList.value = icons.slice(0, defaultPageSize.value);
    } else {
        icons = mdiIcons;
        total.value = icons.length;
        iconList.value = icons.slice(0, defaultPageSize.value);
    }
});

function onSelect(icon: string) {
    selectIcon.value = icon;
    emit("on-selectIcon", icon);
    emit("update:modelValue", icon);
}

</script>

<style lang="scss" scoped>
.icon-menu-item {
  border: 1px var(--el-border-color) solid;
  height: 40px;
  width: 40px;
  margin: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: 240ms ease-in-out;

  &:hover {
    background-color: var(--el-color-primary);
    color: var(--el-color-white);
    border-color: transparent;
  }
}

</style>
